<template>
	<view class="content" :style="{'--color':color}">
	
		<status-bar title='商品轨迹' :back="back"></status-bar>
		<block v-for="(item,index) in pageData" :key="index">
			<view class="viewbox auto m-top20 p-bot20 bgwhite p-left20 bot_bor">
				<view class="row bot_bor p-top20 p-bot20 j-sb a-center">
					<view class="color_33 h6 bold">订单时间：{{item.order_date}}</view>
				</view>
				
				<view class="rows d-flex m-top10 f-nowrap">
					<view class="product_Img p-re f-shrink-0 f-gorw0">
						 <image :src="$imgUrls(item.pdtimg)" mode="aspectFill" class="wh bor_radius_10"></image>
						 <view class="h7 white numId p-top4 p-bot4 p-left14 p-right14">{{item.id}}</view>
					</view>
					<view class="d-flex f-column j-sb m-left20 f-gorw1">
						<text class="color_33 size30 ellipsis_2">{{item.pdtname}}</text>
						<view class="d-flex a-center" v-if="item.pdt_spec">
							<text class="color_99 h6 f-shrink-0">规格：</text>
							<text class="color_33 h6 bold ellipsis">{{item.pdt_spec}}</text>
						</view>
						<view class="d-flex a-center">
							<text class="color_99 h6">数量：</text>
							<text class="color_33 h6 bold">X{{item.pdt_num}}</text>
						</view>
					</view>
				</view>
			</view>
		
		
			<view class="viewbox auto bgwhite p-left30" v-for="(itm,inx) in item.trajectory" :key="inx">
				<view class="rows d-flex a-center f-nowrap bot_bor p-top30 p-bot20">
					<view class="d-flex f-column a-center f-gorw0 f-shrink-0">
						<text class="color_80 h6">{{itm.log_Y}}</text>
						<text class="color_33 size30">{{itm.log_MD}}</text>
						<text class="color_80 h6">{{itm.log_Hi}}</text>
					</view>
					<view class="d-flex f-nowrap a-center m-left50 f-gorw1">
						 <view class="headimg f-shrink-0"><image :src="$imgUrls(itm.v_headimg)" mode="aspectFill" class="wh bor_radius"></image></view>
						 <view class="d-flex f-column j-sb m-left30">
							 <text class="color_80 h6">{{itm.v_name}}</text>
							 <view class="d-flex f-wrap m-top10 color_33 size30 bold">
								 {{itm.title}}
								 <!-- <text class="color_33 size30 bold p-right6">接受了</text>
								 <text class="color_80 size30 p-right6">帅得有点烦躁</text>
								 <text class="color_33 size30 bold">赠送</text> -->
							 </view>
						 </view>
					</view>
				</view>
			</view>
			
		</block>
		
		<empty v-if='noData' type='1' cat='3' msg='还没有相关数据哦~'></empty>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				imgUrl:this.imgUrl,
				
				noData:false,
			
				checkid:'',
				keycode:'',
				pageData:[],
			}
		},
		onLoad(e) {
			let that = this;
			if(e.ids)that.checkid = e.ids;
			if(e.keycode) that.keycode = e.keycode;
		},
		onShow() {
			let that = this;
			that.getShareTrajectory();
		},
		methods: {
			getShareTrajectory(){
				let that = this;
				uni.showLoading({title:'加载中~'})
				that.$http.post({
					url:'/singleSaleWarehouseApi/getShareTrajectory',
					data:{
						checkid:that.checkid,
						keycode:that.keycode
					}
				}).then(res=>{
					uni.hideLoading();
					if(res.errcode == '100'){
						if(res.data){
							that.noData = false;
							that.pageData = res.data;
						}else{
							that.noData = true;
						}
					}else{
						uni.showToast({title: res.msg,icon: 'none'})
					}
				})
			},
		},
		computed:{
			...mapState(['color','vid','bid']),
		}
	}
</script>

<style lang="scss">
	page{
		background: #f7f9fa;
	}
	.product_Img{width:140rpx;height: 140rpx;}
	.numId{position: absolute;right:0;top:0;background: var(--color);border-radius: 0 10rpx 0 10rpx;}
	.headimg{
		width:80rpx;
		height: 80rpx;
		border-radius: 50%;
		-webkit-border-radius: 50%;
		border:6rpx solid var(--color);
	}
</style>
